<template>
  <div>
    <el-form ref="form" label-position="right" :rules="rules" :model="currentRow" label-suffix="："
             label-width="120px">
      <el-row>
        <el-col :span="12">
          <el-form-item label="管养单位" prop="deptTreeId">
            <organization v-model="currentRow.deptTreeId" disabled placeholder="选择管养单位" @change="changeDept"></organization>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="路线" prop="roadId">
            <el-select v-model="currentRow.roadId" filterable clearable placeholder="选择路线">
              <el-option
                v-for="item in deptRoadList"
                :key="item.id"
                :label="item.name"
                :value="item.id">
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row class="base-end">
        <el-col :span="12">
          <el-row>
            <el-col :span="16">
              <el-form-item label="起点经纬度" prop="startLongitude">
                <el-input v-model.trim="currentRow.startLongitude" type="number" placeholder="输入经度">
                  <template slot="prepend"><span style="font-size: 15px">E:</span></template>
                </el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label-width="0px" prop="startLatitude">
                <el-input v-model.trim="currentRow.startLatitude" type="number" placeholder="输入纬度">
                  <template slot="prepend"><span style="font-size: 15px">N:</span></template>
                </el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="16">
              <el-form-item label="起点桩号" prop="startPointBig">
                <el-input v-model.trim="currentRow.startPointBig" type="number" placeholder="输入数字">
                  <template slot="prepend">K</template>
                </el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label-width="0px" prop="startPointSmall">
                <el-input v-model.trim="currentRow.startPointSmall" type="number" :maxlength="3"
                          placeholder="输入数字">
                  <template slot="prepend"><span style="font-weight: 600;font-size: 20px">+</span></template>
                </el-input>
              </el-form-item>
            </el-col>
          </el-row>
        </el-col>
        <el-col :span="12">
          <el-row>
            <el-col :span="16">
              <el-form-item label="止点经纬度" prop="endLongitude">
                <el-input v-model.trim="currentRow.endLongitude" type="number" placeholder="输入经度">
                  <template slot="prepend"><span style="font-size: 15px">E:</span></template>
                </el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label-width="0px" prop="endLatitude">
                <el-input v-model.trim="currentRow.endLatitude" type="number" placeholder="输入纬度">
                  <template slot="prepend"><span style="font-size: 15px">N:</span></template>
                </el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="16">
              <el-form-item label="止点桩号" prop="endPointBig">
                <el-input v-model.trim="currentRow.endPointBig" type="number" placeholder="输入数字">
                  <template slot="prepend">K</template>
                </el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label-width="0px" prop="endPointSmall">
                <el-input v-model.trim="currentRow.endPointSmall" type="number" :maxlength="3"
                          placeholder="输入数字">
                  <template slot="prepend"><span style="font-weight: 600;font-size: 20px">+</span></template>
                </el-input>
              </el-form-item>
            </el-col>
          </el-row>
        </el-col>
      </el-row>

      <el-row class="build_button_view">
        <el-col :span="12">
          <el-form-item label="边坡位置" prop="position">
            <el-select v-model="currentRow.position" clearable placeholder="边坡位置">
              <el-option
                v-for="item in EnumWorkPointPositionList"
                :key="item.code"
                :label="item.name"
                :value="item.code">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="边坡名称" prop="name">
            <el-input v-model="currentRow.name" disabled placeholder="自动生成">
              <el-button slot="append" icon="el-icon-thumb" @click="buildSlopeName()">生成名称</el-button>
            </el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="边坡长度" prop=" slopeLength">
            <el-input v-model.trim="currentRow.slopeLength" disabled placeholder="生成边坡名称时，自动计算">
              <template slot="append">m</template>
            </el-input>
          </el-form-item>
          <el-form-item label="边坡编号" prop="slopeNo">
            <el-input v-model="currentRow.slopeNo" disabled placeholder="自动生成">
              <el-button :disabled="currentRow.slopeNo!=''" slot="append" icon="el-icon-thumb" @click="buildSlopeNo()">
                生成编号
              </el-button>
            </el-input>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <!--    区间信息-->
    <div class="qujian_view" v-if="roadSectionInfo.roadGradeName">
      <span class="label_view">路线编号:</span>{{roadSectionInfo.roadCode}}
      <el-divider direction="vertical"></el-divider>
      <span class="label_view">技术等级:</span>{{roadSectionInfo.roadGradeName}}
      <el-divider direction="vertical"></el-divider>
      <span class="label_view">路线类型:</span>{{roadSectionInfo.roadTypeName}}
      <el-divider direction="vertical" v-if="roadSectionInfo.buildTime"></el-divider>
      <span class="label_view" v-if="roadSectionInfo.buildTime">建造年度:</span>{{roadSectionInfo.buildTime | formatTimer}}
      <el-divider direction="vertical" v-if="roadSectionInfo.changeTime"></el-divider>
      <span class="label_view" v-if="roadSectionInfo.changeTime">改建年度:</span>{{roadSectionInfo.changeTime |
      formatTimer}}
    </div>
  </div>
</template>
<script>

import ItemMixins from "./item.mixins";
import Organization from '@/components/organization-unit/all'
import Enums from '@/utils/enums'

export default {
  props: ['value', 'isEdit'],
  mixins: [ItemMixins,Enums],
  components: {Organization},
  data() {
    return {
      rules: {
        name: {required: true, message: '请点击生成边坡名称'},
        slopeNo: {required: true, message: '请点击生成边坡编号'},
        position: {required: true, message: '请选择边坡位置'},
        startLongitude: {required: true, message: '请输入经纬度'},
        endLongitude: {required: true, message: '请输入经纬度'},
        startLatitude: {required: true, message: '请输入经纬度'},
        endLatitude: {required: true, message: '请输入经纬度'},
        roadId: {required: true, message: '请选择路线'},
        deptTreeId: {required: true, message: '请选择管养单位'},
        startPointBig: {required: true, message: '请输入起点桩号'},
        endPointBig: {required: true, message: '请输入止点桩号'},
      },
      EnumWorkPointPositionList: [],
      sectionList: [],
      roadList2: [],
      deptRoadList: [],
    }
  },
  computed: {
    currentRow: {
      get() {
        return this.value
      },
      set(value) {
        this.$emit('input', value)
      }
    }
  },
  methods: {
    //获取路线列表
    async changeDept() {
      this.deptRoadList = await this.getRoadListByDept(this.currentRow.deptTreeId)
    },
    //生成边坡名称
    buildSlopeName() {
      if (!this.currentRow.startPointBig || !this.currentRow.endPointBig) {
        this.$message({
          message: '提示！请先填入起止桩号',
          type: 'warning'
        });
        return
      }
      if (Number(this.currentRow.endPointBig) < Number(this.currentRow.startPointBig)) {
        this.currentRow.endPointBig = ''
        this.$message({
          message: '提示！止点桩号不应比起点桩号小',
          type: 'warning'
        });
        return
      }
      //生成边坡名称
      let name = "K" + this.currentRow.startPointBig
      if (this.currentRow.startPointSmall) {
        name = name + "+" + this.currentRow.startPointSmall
      }
      name = name + "~K" + this.currentRow.endPointBig
      if (this.currentRow.endPointSmall) {
        name = name + "+" + this.currentRow.endPointSmall
      }
      this.currentRow.name = name + "段高边坡"
      //计算边坡长度
      let start = Number(this.currentRow.startPointBig * 1000) + Number(this.currentRow.startPointSmall)
      let end = Number(this.currentRow.endPointBig * 1000) + Number(this.currentRow.endPointSmall)
      this.currentRow.slopeLength = end - start
      this.$forceUpdate()// 强制刷新
    },
    //生成边坡编号
    async buildSlopeNo() {
      if (!this.currentRow.deptTreeId) {
        this.$message({
          message: '提示！请选择管养中心',
          type: 'warning'
        });
        return
      }
      if (!this.currentRow.roadId || !this.currentRow.position) {
        this.$message({
          message: '提示！请选择路线和边坡位置',
          type: 'warning'
        });
        return
      }
      if (!this.currentRow.startPointBig || !this.currentRow.endPointBig) {
        this.$message({
          message: '提示！请输入起止桩号',
          type: 'warning'
        });
        return
      }

      this.currentRow.slopeNo = await this.getNo(0);
      this.getRoadSectionInfo2();
      this.$forceUpdate()// 强制刷新
    },
    //选择路线，获取第一个区间详情
    getRoadSectionInfo2() {
      let form = {
        roadId: this.currentRow.roadId,
        type: 0,
        deptTreeId: this.currentRow.deptTreeId,
        roadSectionId: this.currentRow.roadSectionId,
        position: this.currentRow.position,
        startPointBig: this.currentRow.startPointBig,
        endPointBig: this.currentRow.endPointBig,
        startPointSmall: this.currentRow.startPointSmall,
        endPointSmall: this.currentRow.endPointSmall,
      }
      this.roadSectionInfo = {}
      this.getRoadSectionInfo(form)
    },
    // 关闭弹窗之前清楚表单校验提示
    clearValidate() {
      this.$refs.form.clearValidate()
    },
    // 内部表单校验
    _validatorForm() {
      return new Promise((resolve) => {
        this.$refs.form.validate((valid) => {
          valid && resolve()
        })
      })
    }
  },
  mounted() {
    this.queryDictList(['EnumWorkPointPosition'],
      ['EnumWorkPointPositionList'])

  },
  created() {
  },
  activated() {
  }
}
</script>

<style lang="less">
  .form_compact {
    display: flex;

    & /deep/ .el-input input {
      border-top-right-radius: 0;
      border-bottom-right-radius: 0;
    }

    & /deep/ .el-button {
      border-top-left-radius: 0;
      border-bottom-left-radius: 0;
    }
  }

  .el-button {
    padding-right: 40px;
  }

  .el-form-item__label {
    /*padding: 0px;*/
  }

  input::-webkit-inner-spin-button {
    -webkit-appearance: none !important;
  }

  .el-date-editor.el-input, .el-date-editor.el-input__inner {
    width: 100%;
  }

  .build_button_view .el-button--default {
    background-color: #1990FE !important;
    color: white !important;
  }


  .qujian_view {
    margin: 10px;
    padding: 10px;
    text-align: center;

    .label_view {
      color: #1990FE;
      margin-bottom: 10px;
      display: inline-block;
      margin-right: 10px;
    }

    .el-divider {
      background-color: #2196f3;
      width: 2px;
    }
  }
</style>
